<template>
  <div class="page-warp h-f bg-grey-200" :style="CC_PAGE_STYLE">
    <div class="header-warp">
      <div class="sticky-headers bg-white">
        <div class="form-warp bg-white" ref="headerForm">
          <uni-forms
            className="borderless"
            label-width="120px"
            label-align="left"
            :modelValue="form"
            :rules="formRules"
            ref="formRef"
          >
            <uni-forms-item label="入库单号" name="iioCode">
              <span class="pesudo-input">
                {{ form['iioCode'] || '系统动自生成' }}
              </span>
            </uni-forms-item>
            <uni-forms-item label="入库日期" name="iioApplyDate" required>
              <uni-datetime-picker
                type="datetime"
                :placeholder="b_PLACEHOLDER_STR('入库日期', COM_TYPE.SELECT)"
                v-model="form['iioApplyDate']"
                :disabled="isview"
              ></uni-datetime-picker>
            </uni-forms-item>
            <uni-forms-item label="业务类型" name="iioBussTypeCode">
              <span class="pesudo-input">
                {{ form.PAGE_HOOK_PARAM.PAGE_TYPE_NAME }}
              </span>
            </uni-forms-item>
            <uni-forms-item label="入库类型" name="iioBussTypeTwoCode" v-if="isOther" required>
              <uni-data-select
                :localdata="O2A(isPIn?KEYS.BUSS_TYPE_II3:KEYS.BUSS_TYPE_II2)"
                v-model="form['iioBussTypeTwoCode']"
                :placeholder="b_PLACEHOLDER_STR('入库类型', COM_TYPE.SELECT)"
              />
            </uni-forms-item>

            <uni-forms-item label="业务单号" name="iioBussCode" :required="!isOther">
              <input-item-selector
                v-if="isIn"
                event-id="MI"
                page="/pages/dialogs/PoDialog"
                value-key="po_code"
                label-key="po_code"
                :placeholder-selector="b_PLACEHOLDER_STR('业务单号', COM_TYPE.SELECT)"
                :display-value="form['iioBussCode']"
                v-model="form['iioBussId']"
                @change="poChange"
                :disabled="isview || isIn"
              ></input-item-selector>

              <input-item-selector
                v-if="isPRefund"
                event-id="SaleRefund"
                page="/pages/dialogs/SaleRefundDialog"
                value-key="sro_code"
                label-key="sro_code"
                :placeholder-selector="b_PLACEHOLDER_STR('业务单号', COM_TYPE.SELECT)"
                :display-value="form['iioBussCode']"
                v-model="form['iioBussId']"
                :params="{}"
                @change="sroChange"
                :disabled="isview"
              ></input-item-selector>

              <uni-easyinput
                v-if="isOther"
                v-model="form['iioBussCode']"
                :placeholder="b_PLACEHOLDER_STR('业务单号', COM_TYPE.IN)"
              />
            </uni-forms-item>

            <uni-forms-item label="业务部门" name="iioOrgId" required>
              <input-item-selector
                event-id="dept"
                page="/pages/dialogs/DeptDialog"
                value-key="F_DepartmentId"
                label-key="F_FullName"
                :placeholder-selector="b_PLACEHOLDER_STR('业务部门', COM_TYPE.SELECT)"
                :display-value="form['iioOrgName']"
                v-model="form['iioOrgId']"
                @change="deptChange"
                :disabled="isview"
              ></input-item-selector>
            </uni-forms-item>
            <uni-forms-item label="仓库" name="bwaId" required>
              <uni-data-select
                :localdata="bwaData.rows"
                v-model="form['bwaId']"
                :placeholder="b_PLACEHOLDER_STR('仓库', COM_TYPE.SELECT)"
                valueKey="bwa_id"
                labelKey="bwa_name"
                @select="bwaChange"
                :disabled="!isCreate"
              />
            </uni-forms-item>
            <uni-forms-item label="业务员" name="iioBussManName" required>
              <input-item-selector
                event-id="user-select-dialog"
                page="/pages/dialogs/UserDialog"
                value-key="F_UserId"
                label-key="F_RealName"
                :placeholder-selector="b_PLACEHOLDER_STR('业务员', COM_TYPE.SELECT)"
                :display-value="form['iioBussManName']"
                v-model="form['iioBussManId']"
                @change="userChange"
                :disabled="isview"
              ></input-item-selector>
            </uni-forms-item>
            <uni-forms-item label="备注" name="remark">
              <uni-easyinput
                v-model="form['remark']"
                :placeholder="b_PLACEHOLDER_STR('备注', COM_TYPE.IN)"
                :disabled="isview"
              />
            </uni-forms-item>
          </uni-forms>
          <div class="ct-end">
            <div class="len-md"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="f-warp">
      <div class="fillet detail">
        <span class="fillet__text">入库明细</span>
        <span class="">
          <button-circle type="primary" size="mini" @click="viewOrderDetail" v-if="!isview"
            >增行
          </button-circle>
        </span>
      </div>
      <div class="form-warp bg-grey-200">
        <stock-item-list
          :data="list.rows"
          @delete="itemDelete"
          :columns="list.columns"
          :show-delete="!isview"
        >
          <template #iibDoQty="{ row }">
            <uni-easyinput
              v-model="row['iibDoQty']"
              :placeholder="b_PLACEHOLDER_STR('实入数量', COM_TYPE.IN)"
              disabled
            />
          </template>

          <template #menu="{ row, index }">
            <div class="btn-rows">
              <button-circle
                type="danger"
                size="mini"
                @click="viewOrderDetail(row, index)"
                v-if="isPInSync"
                >修改
              </button-circle>
              <button-circle
                type="danger"
                size="mini"
                @click="itemDelete(row, index)"
                v-if="!isview"
                >删除
              </button-circle>
              <button-circle type="primary" size="mini" @click="putitem(row, index)" v-if="!isview"
                >上架
              </button-circle>
              <button-circle type="primary" size="mini" @click="putitem(row, index)" v-if="isview"
                >详情
              </button-circle>
            </div>
          </template>
        </stock-item-list>
      </div>
    </div>

    <div class="form-footer">
      <div class="footer-warp">
        <div class="footer__btn">
          <div class="btn">
            <button class="uni-btn" @click="cancel" :disabled="loading.ILOADING">取消</button>
          </div>
          <div class="btn" v-if="!isview">
            <button
              class="uni-btn"
              type="primary"
              @click="confirm(0)"
              :disabled="loading.ILOADING"
              :loading="loading.ILOADING"
            >
              暂存
            </button>
          </div>
          <div class="btn" v-if="!isview">
            <button
              class="uni-btn"
              type="primary"
              @click="confirm(1)"
              :disabled="loading.ILOADING"
              :loading="loading.ILOADING"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <input-item-selector
      event-id="bii"
      page="/pages/dialogs/BiiDialog"
      value-key="bii_id"
      label-key="bii_name"
      @change="biiChange"
      dialog-only
      multiple
      ref="biiRef"
      :params="{ bii_type_list: biiType }"
    ></input-item-selector>

    <input-item-selector
      event-id="biiSyncRef"
      page="/pages/dialogs/BiiDialog"
      value-key="bii_id"
      label-key="bii_name"
      @change="biiSyncChange"
      dialog-only
      ref="biiSyncRef"
      :params="{ bii_type_list: biiType }"
    ></input-item-selector>

    <uni-message-ex />
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useLoading } from '../../../../../store/LoadingStore'
import { useStaticTypeDictionaries } from '../../../../../components/StaticDictionary/StaticTypeDictionaries'
import { useMessage } from '../../../../../store/MessageStore'
import { PageUtil } from '../../../../../utils/PageUtil'
import UniMessageEx from '../../../../../components/UniMessageEx.vue'
import { usePageHeaderForm } from '../../../../../hooks/PageHeaderForm'
import { useFormServ } from '../../../../../hooks/FormServ'
import InputItemSelector from '../../../../../components/InputItemSelector.vue'
import StockItemList from '../../../../../components/StockItem/StockItemList.vue'
import { is_o_in, PAGE_ENTRY_ARG, setPageTitle, usePageParamHook } from '../../common/PageParam'
import ButtonCircle from '../../../../../components/ButtonCircle.vue'
import moment from 'dayjs'
import { LStore } from '../../../../../utils/LStore'
import { useStockStore } from '../../../../../store/StockStore'
import { CONVERT_TYPE } from '../../../../../utils/convertable/Consts'
import { ObjectArray } from '../../../../../utils/convertable/ObjectArray'
import { ParamUtil } from '../../../../../utils/convertable/ParamUtil'
import { UniStore } from '../../../../../utils/UniStorege'
import { StringUtils } from '../../../../../utils/StringUtils'
import { useDictionaryStore } from '../../../../../store/DictionaryStore'

//#region Refs
const headerForm = ref(null)
const formRef = ref()
//#endregion Refs

//-----------------------------------------------------------------

//#region Const

//#endregion Const

//-----------------------------------------------------------------

//#region Use
const { setupPage } = usePageParamHook()
const { COM_TYPE, b_PLACEHOLDER_STR } = useFormServ()

const { KEYS, O2A } = useStaticTypeDictionaries()
const loading = useLoading()
const msgStore = useMessage()
const stockStore = useStockStore()
const dictStore = useDictionaryStore()
const { CC_PAGE_STYLE } = usePageHeaderForm(headerForm)

//#endregion Use

//-----------------------------------------------------------------

//#region Data
const pageParams = ref({})
const form = reactive({})
const formRules = ref({
  iioApplyDate: {
    rules: [
      {
        required: true,
        errorMessage: ' '
      }
    ]
  },
  iioBussTypeCode: {
    rules: [
      {
        required: true,
        errorMessage: ' '
      }
    ]
  },
  iioBussTypeTwoCode: {
    rules: [
      {
        required: true,
        errorMessage: ' '
      }
    ]
  },
  iioOrgId: {
    rules: [
      {
        required: true,
        errorMessage: ' '
      }
    ]
  },
  iioBussManName: {
    rules: [
      {
        required: true,
        errorMessage: ' '
      }
    ]
  }
})

const puttingItem = reactive({
  index: -1
})
const isPRefund = computed(() => {
  const { __PAGE_ID } = form.PAGE_HOOK_PARAM || {}

  console.log('isPRefund>>>>>', __PAGE_ID === PAGE_ENTRY_ARG.P_REFUND)
  return __PAGE_ID === PAGE_ENTRY_ARG.P_REFUND
})

const isIn = computed(() => {
  const { __PAGE_ID } = form.PAGE_HOOK_PARAM || {}
  console.log('isIn>>>>>', __PAGE_ID === PAGE_ENTRY_ARG.M_IN)
  return __PAGE_ID === PAGE_ENTRY_ARG.M_IN
})

const isPIn = computed(() => {
  const { __PAGE_ID } = form.PAGE_HOOK_PARAM || {}

  console.log('isPIn>>>>>', __PAGE_ID === PAGE_ENTRY_ARG.P_IN)
  return __PAGE_ID === PAGE_ENTRY_ARG.P_IN
})

const isPInSync = computed(() => {
  const { __sync } = form
  const { __PAGE_ID } = form.PAGE_HOOK_PARAM || {}
  console.log('isPInSync>>>>>',isPIn && __sync)
  return isPIn && __sync
})

const isOther = computed(() => {
  const { __PAGE_ID } = form.PAGE_HOOK_PARAM || {}

  console.log('isOther>>>>>',is_o_in(__PAGE_ID) || __PAGE_ID === PAGE_ENTRY_ARG.P_IN)
  return is_o_in(__PAGE_ID) || __PAGE_ID === PAGE_ENTRY_ARG.P_IN
})

const biiType = computed(() => {
  if (isPIn.value || isPRefund.value) {
    return '2,3'
  } else if (isOther.value) {
    return '1,2,3'
  } else if (isIn.value) {
    return '1'
  }
})

const list = reactive({
  rows: [],
  total: 0,
  columns: [
    { label: '存货编号', prop: 'bii_code' },
    { label: '存货名称', prop: 'bii_name' },
    { label: '规格型号', prop: 'bii_spec' },
    { label: '应入数量', prop: 'iibApplyQty' },
    { label: '实入数量', prop: 'iibDoQty', slot: true },
    { label: '存货单位', prop: 'bu_name' },
    { label: '备注', prop: 'remark' }
  ]
})

const isview = computed(() => {
  const { __view = false } = pageParams.value
  return __view
})
const isCreate = computed(() => {
  const { __create = false } = pageParams.value
  return __create
})
//#endregion Data

//-----------------------------------------------------------------

//#region Method
const fillForm = function () {
  if (!isOther.value) {
    formRules.value.iioBussCode = {
      rules: [
        {
          required: true,
          errorMessage: ' '
        }
      ]
    }
  }

  const { iioId } = form
  if (!StringUtils.isEmptyOrNull(iioId)) {
    loading.SET_LOADING()
    stockStore
      .getDetail({
        API_TYPE: 'in',
        id: iioId
      })
      .then((res) => {
        const { data, msg } = res
        const { bodyList = [] } = data || {}

        list.rows = new ObjectArray(bodyList)
          .setType(CONVERT_TYPE.S)
          .excludeTypeKey(['iibDoQty', 'accQty', 'putList', 'iibApplyQty'])
          .build()

        let formObj = new ParamUtil(data).setType(CONVERT_TYPE.C).excludeKey(['bodyList']).build()

        Object.entries(formObj).map(([key, value]) => {
          form[key] = value
        })

        loading.FINISH_ALL()
      })
      .catch(() => {
        loading.FINISH_ALL()
      })
  } else {
    const { PAGE_HOOK_PARAM, __sync } = form
    const { name, id } = LStore.getUserInfo()
    const { dept_id, dept_name } = UniStore.getUserDept()
    let now = moment().format('YYYY-MM-DD HH:mm:ss')
    form['iioApplyDate'] = now
    form['iioBussManId'] = id
    form['iioBussManName'] = name
    form['iioBussTypeCode'] = PAGE_HOOK_PARAM.BUSS_TYPE
    form['iioOrgId'] = dept_id
    form['iioOrgName'] = dept_name
    if (isOther.value) {
      if(isPIn){
        const type = '4'
        const { label } = KEYS.BUSS_TYPE_II3[type]
        form['iioBussTypeTwoCode'] = type
        form['iioBussTypeTwoName'] = label
      }else{
        const type = '2'
        const { label } = KEYS.BUSS_TYPE_II2[type]
        form['iioBussTypeTwoCode'] = type
        form['iioBussTypeTwoName'] = label
      }
    }
    if (__sync) {
      loading.SET_LOADING()
      stockStore
        .getSyncProductIn({})
        .then((res) => {
          const { data, msg } = res
          const { bodyList = [] } = data || {}

          list.rows = new ObjectArray(bodyList)
            .setType(CONVERT_TYPE.S)
            .excludeTypeKey(['iibDoQty', 'accQty', 'putList', 'iibApplyQty'])
            .build()

          let formObj = new ParamUtil(data).setType(CONVERT_TYPE.C).excludeKey(['bodyList']).build()

          // Object.entries(formObj).map(([key,value])=>{
          //   form[key] = value
          // })

          loading.FINISH_ALL()
        })
        .catch(() => {
          loading.FINISH_ALL()
        })
    }
  }
}

const clearBody = function (e) {
  list.rows = []
}

const poChange = function (rows) {
  console.log(rows)
  const [item] = rows || []
  const obj = {
    po_code: 'iioBussCode',
    po_id: 'iioBussId',
    supplier_name: 'bsName',
    supplier_id: 'bsId'
  }
  Object.entries(obj).map(([dk, fk]) => {
    form[fk] = item[dk]
  })
  const { iioBussCode, iioBussId } = form
  form['poCode'] = iioBussCode
  form['poId'] = iioBussId
  clearBody()
}

const sroChange = function (rows) {
  const [item] = rows || []
  const obj = {
    sro_code: 'iioBussCode',
    sro_id: 'iioBussId',
    buyer_name: 'bsName',
    buyer_id: 'bsId'
  }
  Object.entries(obj).map(([dk, fk]) => {
    form[fk] = item[dk]
  })
  const { iioBussCode, iioBussId } = form
  form['sroCode'] = iioBussCode
  form['sroId'] = iioBussId
  clearBody()
}

const userChange = function (row) {
  const [item] = row || {}
  const { F_UserId, F_RealName } = item
  form['iioBussManId'] = F_UserId
  form['iioBussManName'] = F_RealName
}

const deptChange = function (row) {
  const [item] = row || {}
  const { F_DepartmentId, F_FullName } = item
  form['iioOrgName'] = F_FullName
  form['iioOrgId'] = F_DepartmentId
}

const putitem = function (row, index) {
  if(!isview.value){
    if(!form.bwaId){
      msgStore.error('请选择仓库')
      return
    }
  }
  puttingItem.index = index
  PageUtil.addEvent(
    'material-in-addingitem',
    (data) => {
      const { list: rows = [], iipQty = 0 } = data
      list.rows[puttingItem.index].putList = rows
      list.rows[puttingItem.index].iibDoQty = iipQty
      if (isOther.value || isPIn.value) {
        // 数量为0或者为空时，应入数量才默认等于实入数量，否则应显示其实际的应入数量
        if(!list.rows[index].iibApplyQty || list.rows[index].iibApplyQty==0){
          list.rows[index].iibApplyQty = iipQty
        }
      }
      puttingItem.index = -1
    },
    {
      route: '/pages/stocks/material/warehouse/in/addingitem',
      params: {
        row: {
          ...row,
          PAGE_HOOK_PARAM: form['PAGE_HOOK_PARAM'],
          __view: isview.value,
          bwaId:form.bwaId,
          isPIn:isPIn.value,
        }
      }
    }
  )
}

const itemDelete = function (row, index) {
  list.rows.splice(index, 1)
}

const viewOrderDetail = function (row, index) {
  if (isIn.value) {
    PageUtil.addEvent(
      'material-in-addingbody',
      (data) => {
        console.log('on add lines', data)
        biiChange(data)
      },
      {
        route: '/pages/dialogs/PoDetailDialog',
        params: {
          valueKey: 'pob_id',
          row: {
            iioBussId: form['iioBussId']
          }
        }
      }
    )
  } else if (isPRefund.value) {
    PageUtil.addEvent(
      'material-in-addingbody',
      (data) => {
        console.log('on add lines', data)
        biiChange(data)
      },
      {
        route: '/pages/dialogs/SaleRefundDetailDialog',
        params: {
          valueKey: 'sob_id',
          row: {
            iioBussId: form['iioBussId']
          }
        }
      }
    )
  } else if (isOther.value) {
    if (row) {
      multiple.value = false
      biiSyncRef.value.show()
      biiSyncRef.value.bii_id = row['bii_id']
    } else {
      multiple.value = true
      biiRef.value.show()
    }
  }
}

const biiRef = ref(null)
const multiple = ref(true)
const biiSyncRef = ref(null)

const biiChange = function (rows) {
  const _rows = rows || []
  const ex = list.rows.map((x) => x['bii_id'])
  let bussLID
  if (isPRefund.value) {
    bussLID = 'srob_id'
  } else if (isOther.value) {
    bussLID = 'bii_id'
  } else {
    bussLID = 'pob_id'
  }

  _rows.map((row) => {
    if (ex.includes(row['bii_id'])) {
      return
    }

    const bii = {
      bii_code: row['bii_code'],
      bii_name: row['bii_name'],
      bu_name: row['bu_name'],
      bu_id: row['bu_id'],
      bii_id: row['bii_id'],
      bii_spec: row['bii_spec'],
      amount: row['amount'],
      qty: row['qty'],
      stock_qty: row['stock_qty'],
      price: row['price'],
      pob_id: row['pob_id'],
      accQty: row['acc_qty'],
      iibApplyQty: row['can_qty'] || row['qty'],
      [bussLID]: row[bussLID],
      businesslineId: row[bussLID]
    }

    list.rows.push(bii)
  })
  // list.rows = rows.map(row => {
  //   return {
  //     bii_code: row['bii_code'],
  //     bii_name: row['bii_name'],
  //     bu_name: row['bu_name'],
  //     bii_id: row['bii_id'],
  //     bii_spec: row['bii_spec'],
  //     amount: row['amount'],
  //     qty: row['qty'],
  //     stock_qty: row['stock_qty'],
  //     price: row['price'],
  //     pob_id: row['pob_id'],
  //     accQty: row['acc_qty'],
  //     iibApplyQty: row['can_qty'],
  //     [bussLID]: row[bussLID],
  //     businesslineId: row[bussLID]
  //   }
  // })
}

const biiSyncChange = function (rows) {
  const _rows = rows || []
  let bussLID = 'bii_id'
  let row = _rows[0]

  const bii = {
    bii_code: row['bii_code'],
    bii_name: row['bii_name'],
    bu_name: row['bu_name'],
    bu_id: row['bu_id'],
    bii_id: row['bii_id'],
    bii_spec: row['bii_spec'],
    amount: row['amount'],
    qty: row['qty'],
    stock_qty: row['stock_qty'],
    price: row['price'],
    pob_id: row['pob_id'],
    accQty: row['acc_qty'],
    iibApplyQty: row['can_qty'] || row['qty'],
    [bussLID]: row[bussLID],
    businesslineId: row[bussLID]
  }
  list.rows.map((x, index) => {
    if (x['bii_id'] === biiSyncRef.value.bii_id) {
      list.rows.splice(index, 1, bii)
    }
  })
}

//#region Method
const queryData = function () {
  dictStore
    .getBwaList({
      limit: -1,
      size: -1,
      bwa_state: 1
    })
    .then((res) => {
      const { Rows = [] } = res || {}
      bwaData.rows = Rows
      // 成品入库---新增&同步-----入库类型默认生产入库，仓库默认成品仓库
      bwaData.rows.map(x=>{
        if(x.bwa_name == '成品仓库'){
          form.bwaId = x.bwa_id
          form.bwaName = x.bwa_name
          form.bwaCode = x.bwa_code
        }
      })
    })
}

const bwaData = reactive({
  rows: []
})
const bwaChange = function (row) {
  const { bwa_id, bwa_name ,bwa_code} = row
  form.bwaId = bwa_id
  form.bwaName = bwa_name
  form.bwaCode = bwa_code

  // dictStore
  //   .getBwlList({
  //     limit: -1,
  //     size: -1,
  //     bwl_state: 1,
  //     bwa_id
  //   })
  //   .then((res) => {
  //     const { Rows = [] } = res || {}
  //     bwlData.rows = Rows
  //   })
}
const cancel = function () {
  PageUtil.back()
}

const confirm = function (sts) {
  if (StringUtils.isEmptyOrNull(form['iioBussCode']) && !isOther.value) {
    msgStore.error('请选择业务单号')
    return
  }

  if (StringUtils.isEmptyOrNull(form['iioOrgId'])) {
    msgStore.error('请选择业务部门')
    return
  }

  if (StringUtils.isEmptyOrNull(form['iioBussManName'])) {
    msgStore.error('请选择业务员')
    return
  }

  if (StringUtils.isEmptyOrNull(form['iioApplyDate'])) {
    msgStore.error('请选择入库日期')
    return
  }
  let bodyList = list.rows.map((x) => {
    x.putList? x.putList.map(y => {
      y.bwaName = form.bwaName
      y.bwaCode = form.bwaCode
    }):""
    return {
      ...x
    }
  })

  let params = {
    ...form,
    bodyList: new ObjectArray(bodyList).setType(CONVERT_TYPE.C).build(),
    iioState: sts
  }
  formRef.value.validate().then(() => {
    if (!list.rows.length) {
      msgStore.error('无入库明细')
      return
    }
    const errors = []
    const { iioId } = form
    if(isPIn && StringUtils.isEmptyOrNull(iioId) && sts === 0){
      // 成品入库--新增，同步的---点击暂存的时候无需校验是否有上架记录
    }else{
       params.bodyList.map(x=>{
        if (StringUtils.isEmptyOrNull(x.iibDoQty)) {
          msgStore.error('上架记录不能为空')
          errors.push(x)
        }
      })
    }
    if(errors.length){
      return
    }
    loading.SET_LOADING()
    const { API_TYPE } = form.PAGE_HOOK_PARAM
    stockStore
      .listMod({
        form: {
          ...params
        },
        API_TYPE
      })
      .then((res) => {
        console.log(res)
        const { msg, success } = res
        if (success) {
          msgStore.success('保存成功')
          PageUtil.back()
          loading.FINISH_ALL()
          return
        }
        msgStore.error(msg)
        loading.FINISH_ALL()
        // PageUtil.back()
      })
      .catch(() => {
        loading.FINISH_ALL()
      })
  })
}
//#endregion Method

//-----------------------------------------------------------------

//#region Page Events
onLoad((params) => {
  let _p = PageUtil.parseParam(params)
  let { row: p } = _p
  Object.entries(p).forEach(([key, value]) => {
    form[key] = value
    pageParams.value[key] = value
  })
  const { PAGE_HOOK_PARAM } = form
  setupPage(PAGE_HOOK_PARAM)
  setPageTitle(PAGE_HOOK_PARAM, '详情')
  fillForm()

  queryData()
})

onReachBottom(() => {
  console.log('bottom')
})
//#endregion Page Events
</script>

<style lang="scss" scoped>
@import '@/assets/PageCommon.scss';
@import '@/assets/PageHeaderForm.scss';

.page-warp {
  .header-warp {
    &:after {
      height: 0px;
    }

    .form-warp {
      padding: 0 12px;
      padding-right: 0;
    }
  }

  .f-warp {
    .form-warp {
      padding-bottom: 12px;
    }
  }

  .form-footer {
    height: 60px;
  }
}

.ct-end {
  display: flex;
  justify-content: flex-end;
  margin-right: 12px;

  .len-md {
    min-width: 20%;

    .ct-btn {
      width: 100%;
    }
  }
}

.btn-rows {
  display: flex;
}

::v-deep(.capture-selector) {
  .s-list {
    overflow: hidden;

    .s-item {
      border-bottom: 1px solid #e5f1fc;
      text-align: center;
      position: relative;

      .item__btn {
        height: 100%;
        width: 100%;
        display: inline-block;
        padding: 22rpx 0rpx;
      }
    }
  }
}

.inside__input {
  ::v-deep.uni-numbox__value {
    height: 21px !important;
  }

  ::v-deep.uni-select {
    height: 21px !important;
  }
}
</style>
